<script setup>
//菜单图标
import { Management,Promotion,UserFilled,User,Crop,EditPen,SwitchButton, CaretBottom} from '@element-plus/icons-vue'
import avatar from '@/assets/8.jpg'
//封装请求接口
import { getApi} from '@/axios/http.js'
//用户存储信息
import {userInfoStore} from '../stor/userInfo.js'
import {useTokenStore} from '../stor/token.js'
//路由导航
import { useRouter } from 'vue-router';
import { ElMessage,ElMessageBox} from 'element-plus';

const userStore = userInfoStore();
const tokenStore = useTokenStore();
const getUserInfo = async ()=>{
    await getApi("/user/userInfo",null,null).then(res=>{
        if(res.code === 0){
            userStore.setInfo(res.data);
        }
    })
}
//获取用户
getUserInfo();
const router = useRouter();
const handleCommand=(command)=>{
        if(command === 'logout'){
            ElMessageBox.confirm(
               '确认要退出吗?',
               '提示',
           {
               confirmButtonText: '确认',
               cancelButtonText: '取消',
               type: 'warning',
            }
           )
         .then(() => {
      
         getApi("/user/logout",null,null).then(res=>{
          if(0 === res.code){
            ElMessage({
               type: 'success',
               message: res.message ? res.message :'退出成功',
            });
            userStore.removeInfo();
            tokenStore.removeToken();
            //完成后刷新列表
            router.push("/login")
            }
         })  
      
       })
        .catch(() => {
          ElMessage({
            type: 'info',
             message: '取消退出',
              })
          })
        }else{
            //其他路由
            router.push("/user/"+command)
        }
}

</script>
<template>
   <el-container class="layout-container">
    <!--侧边栏-->
    <el-aside width="200px">
        <div  class="el-aside_logo"></div>
        <el-menu active-text-color="#ffd04b" background-color="#232323" text-color="#fff"
            router>
            <el-menu-item index="/article/category">
                <el-icon>
                   <Management/>
                </el-icon>
                <span>文章分类</span>
            </el-menu-item>
            <el-menu-item index="/article/manage">
                <el-icon>
                    <Promotion/>
                </el-icon>
                <span>文章管理</span>
            </el-menu-item>
            <el-sub-menu index="1">
                <template #title>
                    <el-icon>
                        <UserFilled/>
                    </el-icon>
                    <span>个人中心</span>
                </template>
                <el-menu-item index="/user/info">
                        <el-icon>
                            <User />
                        </el-icon>
                        <span>基本资料</span>
                </el-menu-item>
                <el-menu-item index="/user/avatar">
                    <el-icon>
                        <Crop/>
                    </el-icon>
                    <span>更换头像</span>
                </el-menu-item>
                <el-menu-item index="/user/resetPassword">
                    <el-icon>
                        <EditPen/>
                    </el-icon>
                    <span>重置密码</span>
                </el-menu-item>
            </el-sub-menu>
        </el-menu>
    </el-aside>
    <!--右侧主区域-->
   <el-container>
       <!--头部区域-->
       <el-header>
          <div>用户:<strong>{{ userStore.info.nickname ? userStore.info.nickname : userStore.info.username }}</strong></div>
          <!--command: 条目被点击后会触发，在事件函数上可以声明一个参数，接收条目对应的指令-->
          <el-dropdown placement="bottom-end" @command="handleCommand">
            <span class="el-dropdown__box">
                <el-avatar :src="userStore.info.userPic?userStore.info.userPic:avatar" />
                <el-icon>
                   <CaretBottom/>
                </el-icon>
             </span>
             <template #dropdown>
                <el-dropdown-menu>
                    <!--command:参数跟路由指定的路径一致-->
                    <el-dropdown-item command="info" :icon="User">基本资料</el-dropdown-item>
                    <el-dropdown-item command="avatar" :icon="Crop">更换头像</el-dropdown-item>
                    <el-dropdown-item command="resetPassword" :icon="EditPen">修改密码</el-dropdown-item>
                    <el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
                </el-dropdown-menu>
             </template>
          </el-dropdown>
       </el-header>
        <!--中间区域-->
        <el-main>
            <router-view></router-view>
        </el-main>
        <!--底部区域-->
        <el-footer>2024 十二月冬创建于山鼎冻人</el-footer>
   </el-container>
   </el-container>
</template>
<style lang="scss" scoped>
.layout-container {
    height: 97.8vh;

    .el-aside {
        background-color: #232323;

        &_logo {
            height: 120px;
            background: url('@/assets/6.jpg') no-repeat center / 220px auto;
        }

        .el-menu {
            border-right: none;
        }
    }

    .el-header {
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .el-dropdown__box {
            display: flex;
            align-items: center;

            .el-icon {
                color: #999;
                margin-left: 10px;
            }

            &:active,
            &:focus {
                outline: none;
            }
        }
    }

    .el-footer {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #666;
    }
}
</style>

